

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/insert1.png">
  <link rel="icon" href="/img/insert1.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  
    <meta name="description" content="无聊的人生只剩下无尽的空虚。">
  
  <meta name="author" content="Mike Taylor">
  <meta name="keywords" content="我的博客">
  
  <title>HTML5新特性 - Mike Taylor</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.4.0/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"gitee.com","root":"/","version":"1.8.8","typing":{"enable":true,"typeSpeed":30,"cursorChar":"|","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"onlypost":false},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
</head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>Mike Taylor's</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                主页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                日志
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                目录
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                个人
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="HTML5新特性">
              
            </span>

            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      Mike Taylor
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-04-07 21:11" pubdate>
        2021年4月7日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      5.1k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      68
       分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">HTML5新特性</h1>
            
              <p class="note note-info">
                
                  本文最后更新于：2021年5月28日 下午
                
              </p>
            
            <div class="markdown-body">
              <h1 id="HTML5新特性"><a href="#HTML5新特性" class="headerlink" title="HTML5新特性"></a>HTML5新特性</h1><p><strong>课程提要</strong></p>
<ul>
<li>HTML5介绍</li>
<li>HTML5网页标准结构</li>
<li>HTML5多媒体标签</li>
<li>HTML5新增常用属性</li>
<li>HTML5新表单操作</li>
<li>HTML5代码规范</li>
</ul>
<h2 id="6-1-HTML5介绍"><a href="#6-1-HTML5介绍" class="headerlink" title="6.1 HTML5介绍"></a>6.1 HTML5介绍</h2><p>HTML5成为HTML、XHTML以及HTML DOM的新标准。</p>
<p>HTML5是W3C和WHATWG合作研发的结果，于2014年正式发布。</p>
<p>HTML5成为了新一代网页开发的标准。</p>
<p>HTML5主要新功能：</p>
<ul>
<li><p>音频视频播放：视频已经在Web上广泛流行，但是其格式几乎都是专有的。YouTube使用Flash，Microsoft使用Windows Media，Apple使用QuickTime。所以在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。而<strong>HTML5新增的 <code>&lt;audio&gt;</code>和 <code>&lt;video&gt;</code>标签使得浏览器不需要插件既可播放视频、音频，抛弃了flash。</strong></p>
</li>
<li><p>动画canvas：HTML5引进了很多新的特性，其中最令人期待的之一就是canvas元素。HTML5 canvas提供了Javascript绘制图形的方法，此方法使用简单但功能强大。每一个canvas元素都有一个“上下文（context）”（想象成绘画板上的一页），在其中可以绘制任意的图形。浏览器支持多个canvas上下文，并通过不同的API提供图形绘制功能。绘画，制作动画（如小游戏开发等）</p>
</li>
<li><p>地理信息：HTML5的另一个功能是地理信息定位功能，一些浏览器提供了geolocation API，这个API也由W3C管理，可以结合HTML5实现你当前地理位置的定位。<br>Google Maps在使用该功能，在Google地图上，你可以通过相关操作告诉Google地图你的当前地理位置信息。目前，geolocation API并没有被众多桌面浏览器广泛但采用（只有Chrome和FireFox 3.6+采用了），但Google Gears插件可以帮助那些旧浏览器实现该功能。<br>例如，Twitter借此实现地理信息感知的tweets消息，当浏览器支持geolocation API的时候，会自动使用该API，否则，使用Google Gears。</p>
</li>
<li><p>硬件加速：Web开发人员只需要使用HTML5标记就可以利用硬件加速优势以及可以通过多种设备数据的强大云环境。<br>针对网站，使用像SVG这样的技术来优化包括台式机和笔记本电脑等尺寸较大的电脑，以及智能手机和平板电脑等更多便携设备上的体验。</p>
</li>
<li><p>WebSocket：是HTML5开始有提供的一种在单个TCP连接上进行<strong>全双工通讯</strong>的协议。<br>在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就可以数据相互传送。<br>浏览器通过Javascript向服务器发出建立WebSocket连接请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。<br>当你获取WebSocket连接后，你可以通过send()方法来向服务器发送数据，并通过onmessage事件来接收服务器返回的数据。<br>创建WebSocket对象：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> Socket = <span class="hljs-keyword">new</span> WebSocket(url, [portocol]);<br></code></pre></td></tr></table></figure>
</li>
<li><p>本地离线应用程序：新增了一个API，利用本地缓存机制，为离线的Web应用程序开发提供了可能。<br>为了能够让Web应用程序在离线状态的时候也能正常工作，必须把所有构成Web应用程序的资源文件，诸如HTML文件，CSS文件，Javascript脚本文件放在本地缓存中，当服务器没有和网络连接时，也可以利用本地缓存中的资源文件来正常运行Web应用程序。</p>
</li>
<li><p>本地存储：相对于HTML4只能使用cookie在客户端存储数据，大小受限制，占用带宽，操作复杂的情况。HTML5支持使用Web Storage在客户端进行存储数据，容量更大，减轻带宽压力，操作简便。</p>
</li>
<li><p>语义化标记：HTML5最大的意义在于改变了WEB文档的结构方式，借助header、footer、section、article这些标签，我们可以实现更具结构化、语义化的文档。这样，搜索引擎可以更容易索引Web站点，我们也可以搜索更快、获得更准确的信息。</p>
</li>
<li><p>HTML5与Flash：HTML5免费、但是不能做特效。  </p>
</li>
</ul>
<p>HTML5的优势：</p>
<ul>
<li>提高可用性和改进用户的友好体验</li>
<li>新标签有助于开发人员定义重要的内容</li>
<li>可以给站点带来更多的多媒体元素（视频和音频）</li>
<li>可以很好的代替FLASH和Silverlight</li>
<li>当涉及到网站的抓取和索引时，对于SEO很友好</li>
<li>大量应用于移动程序和游戏</li>
</ul>
<p>HTML5的劣势：</p>
<ul>
<li>HTML5本身还在发展中，它不是用户应用的最迫切需求，更多是厂商视图改变软件生态格局的战略需求</li>
<li>HTML5的兼容性受限于各大浏览器表现，例如微软的IE和firefox之间存在很多差别</li>
<li>HTML5需要一个成熟完整的开发环境，目前还缺少</li>
<li>HTML5功能的暴增，浏览器必须有一个高效的图形引擎和脚本引擎</li>
<li>HTML5需要杀手级应用来吸引和引导用户升级浏览器，最终完成HTML5终端的部署（通过HTML升级带动浏览器升级）</li>
</ul>
<h2 id="6-2-HTML5网页标准结构"><a href="#6-2-HTML5网页标准结构" class="headerlink" title="6.2 HTML5网页标准结构"></a>6.2 HTML5网页标准结构</h2><h3 id="6-2-1-网页布局标签"><a href="#6-2-1-网页布局标签" class="headerlink" title="6.2.1 网页布局标签"></a>6.2.1 网页布局标签</h3><ul>
<li>header：页首</li>
<li>nav：导航栏</li>
<li>aside：侧边栏</li>
<li>main：主体</li>
<li>section：区块</li>
<li>article：文章</li>
<li>footer：页尾</li>
</ul>
<p><a href="https://imgtu.com/i/ctSB5T"><img src="https://z3.ax1x.com/2021/04/08/ctSB5T.png" srcset="/img/loading.gif" alt="ctSB5T.png"></a></p>
<h3 id="6-2-2-语义化标签"><a href="#6-2-2-语义化标签" class="headerlink" title="6.2.2 语义化标签"></a>6.2.2 语义化标签</h3><ul>
<li><code>&lt;mark&gt;</code>：高亮显示，行级标签</li>
<li><code>&lt;summary&gt;（摘要）</code>和 <code>&lt;details&gt;（描述）</code> ：一般用于名词解释，或用于封装一个区块。大前端开发》组件化开发+模块化开发+自动化开发+后台开发</li>
<li><code>&lt;meter&gt;</code>：定义度量衡。有属性value/min/max/low/high</li>
<li><code>&lt;progress&gt;</code>：显示进度条。有属性value/min/max</li>
<li><code>&lt;dialog&gt;</code>：对话框或窗口</li>
<li><code>&lt;figure&gt;</code>：figure标签用于对元素进行组合，一般用来组合一张图的标题、图片和图片描述等</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>语义化标签<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><br>        dialog&#123;<br><span class="css">            <span class="hljs-attribute">position</span>: relative;</span><br>        &#125;<br><span class="css">        dialog <span class="hljs-selector-tag">span</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">            <span class="hljs-attribute">right</span>: <span class="hljs-number">5px</span>;</span><br><span class="css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">5px</span>;</span><br><span class="css">            <span class="hljs-attribute">cursor</span>: pointer;<span class="hljs-comment">/*添加手形*/</span></span><br>        &#125;<br><span class="css">        <span class="hljs-selector-tag">figure</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">            <span class="hljs-attribute">text-align</span>: center;</span><br>        &#125;<br><span class="css">        <span class="hljs-selector-tag">figure</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br>        &#125;<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--mark标签：高亮显示--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">mark</span>&gt;</span>核心价值观<span class="hljs-tag">&lt;/<span class="hljs-name">mark</span>&gt;</span>是一个民族赖以维系的精神纽带，是一个国家共同的思想道德基础。能否构建具有强大感召力的核心价值观，关系社会和谐稳定，关系国家长治久安。<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--`&lt;summary&gt;（摘要）`和 `&lt;details&gt;（描述）` ：一般用于名词解释--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">details</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">summary</span>&gt;</span><br>            内容<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">summary</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>社会主义核心价值观<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        &lt;<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">details</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--meter--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">meter</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;110&quot;</span> <span class="hljs-attr">min</span>=<span class="hljs-string">&quot;80&quot;</span> <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;120&quot;</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">meter</span>&gt;</span>公里/h<br><br><span class="hljs-comment">&lt;!--progress:进度条--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>任务已完成：<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">progress</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;80&quot;</span> <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;100&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">progress</span>&gt;</span>80%<br><br><span class="hljs-comment">&lt;!--`&lt;dialog&gt;`：对话框或窗口--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">dialog</span> <span class="hljs-attr">open</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-symbol">&amp;times;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>社会主义核心价值观<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>富强<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>民主<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>文明<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>和谐<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>自由<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>平等<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>公正<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>法治<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>爱国<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>敬业<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>诚信<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>友善<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">dialog</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--`&lt;figure&gt;`：figure标签用于对元素进行组合--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">figure</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>游戏<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;imgs/三国杀.bmp&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;测试&quot;</span>/&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>三国杀，谋略智慧游戏<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="6-3-HTML5多媒体"><a href="#6-3-HTML5多媒体" class="headerlink" title="6.3 HTML5多媒体"></a>6.3 HTML5多媒体</h3><ul>
<li><p><code>&lt;audio&gt;</code>：播放音乐或音频。IE9以下的版本不支持。</p>
<ul>
<li>支持的格式：.mp3/.ogg/.wav<br>Ogg：一种新的音频压缩<strong>格式</strong>，是完全免费、开放和没有专利限制的<br>MP3：一种音频压缩<strong>技术</strong>。它被设计用来大幅度降低音频数据量<br>WAV：为微软公司开发的一种声音文件<strong>格式</strong>，声音文件质量和CD相差无几</li>
<li>属性：<br>src：加载文件路径<br>autoplay：自动播放<br>loop：循环<br>controls：控制条<br>muted：静音<br>preload：预加载（当使用autoplay时，preload自动失效）</li>
</ul>
</li>
<li><p><code>&lt;video&gt;</code>：加载视频</p>
<ul>
<li><p>支持的格式.mp4/.ogg/.webm<br>mp4：带有H.264视频编码和ACC音频编码的MPEG4文件<br>WEBM：带有VP8视频解码和Vorbis音频编码的WebM文件<br>Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件</p>
</li>
<li><p>属性</p>
<p>src：加载文件路径<br>autoplay：自动播放<br>loop：循环，默认无限循环<br>controls：控制条<br>muted：静音<br>preload：预加载（当使用autoplay时，preload自动失效）<br>width/height：设置视频宽高<br>poster：海报</p>
</li>
</ul>
</li>
<li><p><code>&lt;embed&gt;</code>：加载插件，嵌入内容。(不常用)</p>
<ul>
<li>属性<br>src：加载文件路径<br>width：宽度<br>height：高度<br>type：类型<br>loop<br>hidden<br>autostart<br>starttime<br>controls</li>
</ul>
</li>
<li><p><code>&lt;canvas&gt;</code>：画布，是一个容器元素，</p>
<ul>
<li>注意：<br>单独使用canvas毫无意义，它必须结合JavaScript使用。它的具体功能体现是通过javascript脚本体现的。<br>canvas的宽高最好不要通过css实现，而是直接使用标签属性width和height实现。</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>音频<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><br>        <br>    <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--音频--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">audio</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;C:\Users\LEGION\Downloads\小时姑娘 - 爱殇.mp3&quot;</span> <span class="hljs-attr">controls</span> <span class="hljs-attr">autoplay</span> <span class="hljs-attr">loop</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">muted</span> <span class="hljs-attr">preload</span>=<span class="hljs-string">&quot;auto&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">audio</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--视频--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;F:\开发学习资料\英语六级\03.20年12月有道六级\02.基础班\听力基础包\六级真题核心句1.mp4&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;400pxhg&quot;</span> <span class="hljs-attr">autoplay</span> <span class="hljs-attr">controls</span> <span class="hljs-attr">poster</span>=<span class="hljs-string">&quot;imgs/三国杀.bmp&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--embed：加载插件，嵌入内容--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">embed</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;run.swf&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;application/x-shockwave-flash&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">embed</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;movie.ogg&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;video/ogg&quot;</span> <span class="hljs-attr">autostart</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--canvas--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;400&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;200&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: cyan&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><span class="hljs-comment">/*script用来包裹脚本代码*/</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> canvas = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;canvas&#x27;</span>)[<span class="hljs-number">0</span>];<span class="hljs-comment">//脚本DOM操作，用来获取canvas这个标签元素</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> ctx = canvas.getContext(<span class="hljs-string">&#x27;2d&#x27;</span>)<span class="hljs-comment">//绘制2d图</span></span><br><span class="javascript">    ctx.fillStyle = <span class="hljs-string">&#x27;#ff0000&#x27;</span><span class="hljs-comment">//设置填充色</span></span><br><span class="javascript">    ctx.fillRect(<span class="hljs-number">50</span>,<span class="hljs-number">0</span>,<span class="hljs-number">200</span>,<span class="hljs-number">100</span>)<span class="hljs-comment">//绘制一个矩形</span></span><br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="6-4-HTML5新增常用属性"><a href="#6-4-HTML5新增常用属性" class="headerlink" title="6.4 HTML5新增常用属性"></a>6.4 HTML5新增常用属性</h2><ul>
<li>contenteditable：属性只能是true或者false，几乎可以为任何元素指定。用于将元素设为<strong>可编辑模式</strong>，可用于所有标签。</li>
<li>hidden：属性规定对元素进行隐藏，一般用来<strong>传值</strong>，或者当某个条件成立，执行内容显示，属性默认值为hidden。</li>
<li>data-*：属性用于存储页面或应用程序的私有自定义数据。一般用于<strong>传值</strong>。</li>
<li>multiple：规定输入域可选择多个内容。用于<strong>表单组件</strong>中，如file/select。</li>
<li>required：属性约束表单元在提交前必须输入值。用于<strong>表单组件</strong>中，需要结合提交按钮使用。</li>
<li>pattern：属性规定用于验证输入字段模式。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>HTML5新增属性<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-comment">&lt;!--contenteditable--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">contenteditable</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>contextEditable<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><br>    <span class="hljs-comment">&lt;!--hidden--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span>box1<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">hidden</span>&gt;</span>box2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span>box3<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>    <span class="hljs-comment">&lt;!--data-*：属性用于存储页面或应用程序的私有自定义数据。一般用于传值--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">&quot;0001&quot;</span>&gt;</span>只是撒<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><br>    <span class="hljs-comment">&lt;!--multiple：规定输入域可选择多个内容。用于**表单组件**中，如file/select。--&gt;</span><br>    <span class="hljs-comment">&lt;!--按住ctrl实现多选--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">multiple</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;4&quot;</span>&gt;</span>4<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span><br><br>    <span class="hljs-comment">&lt;!--required：属性约束表单元在提交前必须输入值。--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入用户名：&quot;</span> <span class="hljs-attr">required</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span><span class="hljs-comment">&lt;!--为正则写法--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;email&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入邮箱：&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><br>    <span class="hljs-comment">&lt;!--pattern：属性规定用于验证输入字段模式。--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入用户名：&quot;</span> <span class="hljs-attr">required</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">&quot;[A-Za-z0-9] &#123;4,6&#125;&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span><span class="hljs-comment">&lt;!--为正则写法--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;email&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入邮箱：&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="6-5-HTML5新表单操作"><a href="#6-5-HTML5新表单操作" class="headerlink" title="6.5 HTML5新表单操作"></a>6.5 HTML5新表单操作</h2><h3 id="6-5-1-表单组件"><a href="#6-5-1-表单组件" class="headerlink" title="6.5.1 表单组件"></a>6.5.1 表单组件</h3><ul>
<li><p>color：颜色</p>
</li>
<li><p>email：邮箱，自带邮件格式验证</p>
</li>
<li><p>url：网址，自带格式验证</p>
</li>
<li><p>tel：电话号码</p>
</li>
<li><p>number：数字，自带格式验证<br>有属性min/max/step</p>
</li>
<li><p>range：范围</p>
</li>
<li><p>search：搜索</p>
</li>
<li><p>date：日期</p>
</li>
<li><p>datetime：日期时间</p>
</li>
<li><p>datetime-local：本地日期时间</p>
</li>
<li><p>year：年份</p>
</li>
<li><p>time：时间</p>
</li>
<li><p>month：月份</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>HTML5新表单操作<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--* color：颜色--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;color&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-comment">&lt;!--* email：邮箱--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;email&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-comment">&lt;!--* url：网址--&gt;</span><br><span class="hljs-comment">&lt;!--* tel：电话号码--&gt;</span><br><span class="hljs-comment">&lt;!--* number：数字--&gt;</span><br><span class="hljs-comment">&lt;!--* range：范围--&gt;</span><br><span class="hljs-comment">&lt;!--* search：搜索--&gt;</span><span class="hljs-comment">&lt;!--* date：日期--&gt;</span><br><span class="hljs-comment">&lt;!--* date：日期--&gt;</span><br><span class="hljs-comment">&lt;!--* datetime：日期时间--&gt;</span><br><span class="hljs-comment">&lt;!--* datetime-local：本地日期时间--&gt;</span><br><span class="hljs-comment">&lt;!--* year：年份--&gt;</span><br><span class="hljs-comment">&lt;!--* time：时间--&gt;</span><br><span class="hljs-comment">&lt;!--* month：月份--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;tel&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;url&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;number&quot;</span> <span class="hljs-attr">step</span>=<span class="hljs-string">&quot;10&quot;</span> <span class="hljs-attr">min</span>=<span class="hljs-string">&quot;100&quot;</span> <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;200&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;type&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;20&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;search&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;date&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;datetime&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;datetime-local&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;week&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;time&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;month&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="6-5-2-form属性"><a href="#6-5-2-form属性" class="headerlink" title="6.5.2 form属性"></a>6.5.2 form属性</h3><ul>
<li>formaction：属性，表单请求地址，更改表单的action属性值（数据提交位置）</li>
<li>formenctype：修改表单请求类型</li>
<li>formmethod：修改数据提交方法<ul>
<li>get方式：以字节为单位提交（只接受ASCII）；以明文提交；提交信息会显示在地址栏中；在浏览器中回退是无害的；get会被浏览器主动缓存；get和post在传输字节上一般都没有限制，但不排除个别浏览器，可以理解为，get一般不超过2K，post一般不超过2M；get一般不用于传输一些敏感数据，因为传输的数据是裸露的。</li>
<li>post方式：以字符为单位提交；以暗文方式提交；在浏览器中回退，post会再次提交请求；post不会被被浏览器主动缓存，除非手动设置。</li>
<li>默认以get方式发请求或者提交</li>
</ul>
</li>
<li>form：设置表单元素属于哪个表单</li>
<li>novalidate：不验证</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>form表单属性<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--* formaction：属性，表单请求地址，更改表单的action属性值（数据提交位置）--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;//baidu.com&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span> <span class="hljs-attr">formaction</span>=<span class="hljs-string">&quot;//163.com&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--* formenctype：修改表单请求类型--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">enctype</span>=<span class="hljs-string">&quot;application/x-www-form-urlencoded&quot;</span>&gt;</span><span class="hljs-comment">&lt;!--application/x-www-form-urlencoded：普通表单类型--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span> <span class="hljs-attr">formenctype</span>=<span class="hljs-string">&quot;multipart/form-data&quot;</span>&gt;</span><span class="hljs-comment">&lt;!--multipart/form-data：文件上传的类型--&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--* formmethod：修改数据提交方法--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;get&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;username&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span> <span class="hljs-attr">formmethod</span>=<span class="hljs-string">&quot;get&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--* form：设置表单元素属于哪个表单--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;get&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;user-info&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;username&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;password&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;userpwd&quot;</span> <span class="hljs-attr">form</span>=<span class="hljs-string">&quot;user-info&quot;</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--* novalidate：不验证--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;get&quot;</span> <span class="hljs-attr">novalidate</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;email&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;useremail&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="6-5-3-input属性"><a href="#6-5-3-input属性" class="headerlink" title="6.5.3 input属性"></a>6.5.3 input属性</h3><ul>
<li>autocomplete：规定输入字段是否应该启用自动完成。<br>自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项（值：on/off，默认为on）<br>用来帮助用户输入，每一次输入的内容，浏览器是否保存输入的值，以备将来使用<br>为保护敏感数据，如用户账号密码等，避免本地浏览器对他们不安全存储，一般需要关闭</li>
<li>autofocus：规定当前页面加载时，input元素应该自动获得焦点，如果使用该属性，则input元素会获得焦点</li>
<li>step：规定输入字段的合法数字间隔（step=”3”，合法数字应该为-3，0，3，6，9……），一般搭配max/min属性配合使用，以创建合法值得范围</li>
<li>mutiple：多选</li>
<li>pattern：正则匹配</li>
<li>placeholder：输入提示（也可以用label标签包裹）</li>
<li>required：必须输入</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>input属性<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--autocomplete：规定输入字段是否应该启用自动完成。--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;username&quot;</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">&quot;on&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--autofocus：规定当前页面加载时，input元素应该自动获得焦点--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;username&quot;</span> <span class="hljs-attr">autofocus</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">&quot;on&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--placeholder：输入提示--&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="6-6-HTML5代码规范"><a href="#6-6-HTML5代码规范" class="headerlink" title="6.6 HTML5代码规范"></a>6.6 HTML5代码规范</h2><ul>
<li><p>正确使用文档类型<br>请始终在文档首行声明文档类型：<code>&lt;!DOCTYPE html&gt;</code>/<code>&lt;!doctype html&gt;</code></p>
</li>
<li><p>使用小写元素名，属性名</p>
</li>
<li><p>关闭所有HTML元素</p>
</li>
<li><p>关闭空的HTML元素</p>
</li>
<li><p>属性值引号 双引号</p>
</li>
<li><p>等号后少用空格</p>
</li>
<li><p>图片要加alt属性；定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁</p>
</li>
<li><p>避免长代码</p>
</li>
<li><p>HTML注释</p>
</li>
<li><p>样式表</p>
<ul>
<li>开括号与选择器在同一行上</li>
<li>在开括号之前用一个空格</li>
<li>使用两个字符的缩进</li>
<li>在每个属性与其值之间使用冒号加一个空格</li>
<li>在每一个逗号或者分号之后使用空格</li>
<li>在每一个属性值对（包括最后一个）之后使用分号</li>
<li>只在值包含空格时使用引号来包围值</li>
<li>把闭括号放在新的一行，之前不用空格</li>
<li>避免每行超过80个字符</li>
</ul>
</li>
</ul>
<h2 id="6-7-课后实训"><a href="#6-7-课后实训" class="headerlink" title="6.7 课后实训"></a>6.7 课后实训</h2><p>摘要：</p>
<ul>
<li><p>需要引入外部字体link</p>
</li>
<li><p>text-shadow: 横向偏移 纵向偏移 模糊度 颜色<br>例如：<code>text-shadow: 1px 1px 1px #fff</code></p>
</li>
<li><p>删除 <code>&lt;audio&gt;</code>被激活后的边框</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">audio</span>,<span class="hljs-selector-tag">video</span>,<span class="hljs-selector-tag">img</span> &#123;<br>	<span class="hljs-attribute">border</span>: <span class="hljs-number">0</span>;<br>	<span class="hljs-attribute">outline</span>: none;<br>&#125;<br></code></pre></td></tr></table></figure>
</li>
<li><p>加载flash动画和视频，记得给出宽高，因为这样可以有效避免闪烁问题（网速较慢，视频后于文字加载，当视频加载成功，会占据文字位置）</p>
</li>
<li><p>加载flash动画的一种办法</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">section</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">object</span> <span class="hljs-attr">data</span>=<span class="hljs-string">&quot;audio_video/spring.swf&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;application/x-shockwave-flash&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;719&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;428&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">param</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;movie&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;spring.swf&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">object</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span><br></code></pre></td></tr></table></figure>
            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/HTML/">HTML</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2021/04/12/%E6%95%B0%E6%8D%AE%E5%BA%93%E4%BD%9C%E4%B8%9A2/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">数据库第四章实践作业</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2021/04/07/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A010/">
                        <span class="hidden-mobile">CSS新特性</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->

  <div class="col-lg-7 mx-auto nopadding-x-md">
    <div class="container custom post-custom mx-auto">
      <img src="https://octodex.github.com/images/jetpacktocat.png" srcset="/img/loading.gif" class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;">
    </div>
  </div>


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        京ICP证123456号
      </a>
    </span>
    
      
        <span>
          <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
            rel="nofollow noopener"
            class="beian-police"
            target="_blank"
          >
            
              <span style="visibility: hidden; width: 0">|</span>
              <img src="/img/police_beian.png" srcset="/img/loading.gif" alt="police-icon"/>
            
            <span>京公网安备12345678号</span>
          </a>
        </span>
      
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "/local-search.xml";
      $('#local-search-input').on('click', function() {
        searchFunc(path, 'local-search-input', 'local-search-result');
      });
      $('#modalSearch').on('shown.bs.modal', function() {
        $('#local-search-input').focus();
      });
    })()
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>



<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"scale":1,"hHeadPos":0.5,"vHeadPos":0.618,"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"superSample":2,"width":150,"height":300,"position":"right","hOffset":0,"vOffset":-20},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body>
</html>
